<template>
	<view>
		<view class="myHeader">
			<uv-navbar bgColor="rgba(0,0,0,0)" :placeholder="true">
				<view class="" slot="left"></view>
				<view class="" slot="center">
					<view class="font-32 font-weight textC">我的</view>
				</view>
			</uv-navbar>
			<!-- 用户信息模块 登录-->
			<view class="userInfo flex_b" v-if="token" @click="edit">
				<view class="flex">
					<image class="userInfoAvatar m-r-20" v-if="userInfo.avatar" :src="$util.img(userInfo.avatar)"
						mode=""></image>
					<image class="userInfoAvatar m-r-20" v-else src="/static/userNone.png" mode=""></image>
					<view class="flex_c h-100">
						<view class="userInfoText flex">
							<view class="font-32 font-weight">{{userInfo.nickname||'微信用户'}}</view>
							<image src="/static/icon/ic1.png" v-if="userInfo.level>1" class="m-l-10" mode=""></image>
							<!-- <image src="/static/icon/ic2.png" v-if="userInfo.is_auth=='1'" class="m-l-10" mode="">
							</image> -->
							<view class="h-32 m-l-10 shiming" v-if="userInfo.is_auth==1">已实名</view>
						</view>
						<view class="font-24 grey" v-if="userInfo.user_id">ID:{{userInfo.user_id}}</view>
					</view>
				</view>
				<view class="edit" @click="edit">
					编辑
				</view>
			</view>
			<!-- 未登录 -->
			<view class="userInfo flex_b" v-else>
				<view class="flex" @click="goLogin">
					<image class="userInfoAvatar m-r-20" src="/static/userNone.png" mode=""></image>
					<view class="userInfoText flex">
						<view class="font-32 font-weight">点击登录</view>
					</view>
				</view>
			</view>
			<!-- 数量统计 -->
			<view class="flex_b" @click="$util.redirectTo('/otherpages/myVisitor/myVisitor')"
				style="padding-left: 60rpx;padding-right: 60rpx;">
				<view class="textC" @click="like(1)">
					<view class="font-32 font-weight">{{userInfo.loveme||0}}</view>
					<view class="grey">关注我的人</view>
				</view>
				<view class="textC" @click="like(2)">
					<view class="font-32 font-weight">{{userInfo.melove||0}}</view>
					<view class="grey">我关注的人</view>
				</view>
				<view class="textC" @click="like(3)">
					<view class="font-32 font-weight">{{userInfo.lookme||0}}</view>
					<view class="grey">看过我的人</view>
				</view>
			</view>

			<view class="vipModel" @click="$util.redirectTo('/otherpages/vip/vip')" v-if="token">
				<image src="../../static/images/vipBg.png" mode=""></image>
				<view class="flex_b vipModelTitle">
					<view class="font-32 font-weight white">会员中心</view>
					<view class="iconfont icon-xiangyoujiantou font-26 font-weight white" style="font-size: 28rpx;">
					</view>
				</view>
				<view class="vipModelText flex_b">
					<view class="vipModelTextA">
						<view class="">{{userInfo.levelinfo.name||'免费会员'}}</view>
						<view class="" v-if="userInfo.levelinfo.end_time=='永久'">{{userInfo.levelinfo.end_time||''}}
						</view>
						<view class="" v-else>{{userInfo.levelinfo.end_time||0}} 到期</view>
					</view>
					<view class="vipModelTextB">{{userInfo.levelinfo.name=='免费会员'?'开通会员':'充值/续费'}}</view>
				</view>
			</view>

			<view class="modelBox" v-if="userInfo.album_images">
				<view class="flex_b m-b-20" @click="$util.redirectTo('/otherpages/photograph/photograph')">
					<view class="font-30">我的相册 <text class="grey m-l-20">({{userInfo.album_images.length||0}}/6)</text>
					</view>
					<view class="iconfont icon-xiangyoujiantou"></view>
				</view>
				<scroll-view scroll-x="true" class="scrollViewBox" v-if="userInfo.album_images.length">
					<block v-for="(item,i) in userInfo.album_images">
						<image :src="$util.img(item.image)" @click="lookImg(i)" mode="aspectFill"></image>
					</block>
				</scroll-view>
				<view class="grey" v-else>
					暂未上传
				</view>
			</view>

			<view class="modelBox flex">
				<view class="toolItem" @click="routerFn(itemA)" v-if="chackAuth==1">
					<image :src="itemA.image" mode=""></image>
					<view class="font-24">{{itemA.title}}</view>
				</view>
				<view v-for="(item,i) in list" :key="i" class="toolItem" @click="routerFn(item)">
					<image :src="item.image" mode=""></image>
					<view class="font-24">{{item.title}}</view>
				</view>
			</view>

		</view>

		<view class="bottom-mar"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chackAuth: 0,
				userInfo: {},
				token: '',
				itemA: {
					image: require('../../static/images/userIcon1.png'),
					title: '认证中心',
					router: '/otherpages/authentication/authentication'
				},
				list: [{
						image: require('../../static/images/userIcon2.png'),
						title: '我的活动',
						router: '/otherpages/myActivity/myActivity'
					},
					{
						image: require('../../static/images/userIcon3.png'),
						title: '设置',
						router: '/otherpages/edit/edit'
					},
					{
						image: require('../../static/images/code.png'),
						title: '二维码',
						router: '/otherpages/code/code'
					}
				],
				album_images: []
			};
		},
		onLoad() {

		},
		onShow() {
			this.isAuth()
			uni.getStorage({
				key: 'token',
				success: res => {
					this.token = res.data
					this.getUserInfo()
				},
				fail: err => {
					this.token = ''
					this.userInfo = {}
				}
			})

		},
		methods: {
			isAuth() {
				this.$api.sendRequest({
					url: '/api/Index/chack_auth',
					data: {},
					success: res => {
						this.chackAuth = res.data
					}
				})
			},
			// 关注我的
			like(type) {
				let url = type == 1 ? '/otherpages/likeMe/likeMe' : type == 2 ? '/otherpages/LikeList/LikeList' :
					'/otherpages/myVisitor/myVisitor'
				uni.navigateTo({
					url: url
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.album_images = []
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						this.userInfo = res.data
						uni.$chat_userID = res.data.mobile
						uni.setStorageSync('userId', res.data.mobile);
						res.data.album_images.forEach(item => {
							this.album_images.push(item.image)
						})


					}
				})
			},

			// 设置用户信息
			edit() {
				this.$util.redirectTo('/otherpages/userInfo/userInfo')
			},
			// 去登陆
			goLogin() {
				this.$util.redirectTo('/pages/login/login')
			},
			routerFn(item) {
				this.$util.redirectTo(item.router)
			},
			lookImg(i) {
				let that = this
				// 网络
				uni.previewImage({
					current:i,
					urls: that.album_images,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
								.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.toolItem {
		margin-right: 92rpx;
		text-align: center;

		image {
			width: 88rpx;
			height: 88rpx;
		}

		view {
			width: 100rpx;
		}
	}

	.scrollViewBox {
		display: inline-block;
		/* 第一步：让文字强制一行显示 */
		white-space: nowrap;
		/* 第二步：溢出隐藏 */
		overflow: hidden;
		/* 第三步：溢出的内容省略号显示 */
		text-overflow: ellipsis;

		image {
			width: 216rpx;
			height: 240rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
		}
	}

	.vipModel {
		width: 694rpx;
		height: 240rpx;
		position: relative;
		margin: 25rpx auto;

		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 694rpx;
			height: 240rpx;
		}

		.vipModelTitle {
			position: absolute;
			top: 0;
			left: 0;
			width: 644rpx;
			padding: 25rpx;
		}

		.vipModelText {
			padding: 0 25rpx;
			position: absolute;
			bottom: 16rpx;
			left: 50%;
			margin-left: -331rpx !important;
			width: 612rpx;
			height: 136rpx;
			background: linear-gradient(180deg, #F6E1C0 0%, #F6E1C0 100%);
			opacity: 1;
			border-radius: 16rpx;

			.vipModelTextA {
				:nth-child(1) {
					font-size: 32rpx;
					font-family: PingFangSC-Semibold;
					line-height: 42rpx;
					color: #95603F;
					opacity: 1;
				}

				:nth-child(2) {
					font-size: 24rpx;
					font-family: PingFangSC-Regular;
					line-height: 32rpx;
					color: #95603F;
					opacity: 1;
					margin-top: 10rpx;
				}
			}

			.vipModelTextB {
				width: 128rpx;
				height: 56rpx;
				background: #ee8034;
				opacity: 1;
				border-radius: 28rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Semibold;
				line-height: 56rpx;
				color: #FFFFFF;
				opacity: 1;
				text-align: center;
			}
		}
	}

	.edit {
		width: 88rpx;
		height: 38rpx;
		border-radius: 8rpx;
		border: 1rpx solid #e3ded8;
		line-height: 38rpx;
		text-align: center;
		color: #75726f;
		font-size: 24rpx;
	}

	.myHeader {
		height: 688rpx;
		background-image: linear-gradient(to top, #f8f8f8, #f8f1e9);
	}

	.userInfo {
		padding: 30rpx;

		.userInfoAvatar {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
		}

		.userInfoText {
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>
